<template>
  <!--案件导入-批次确认-->
  <section class="component case-batch-confirm">
    <el-form label-width="100px" :model="comfirmModel" :rules="rules" ref="form">
      <el-form-item label="批次号：" prop="batchNumber">
        <el-select placeholder="请选择" v-model="comfirmModel.batchNumber" @change="changeShopping">
          <el-option v-for="item in batchList" :key="item.batchNumber" :label="item.batchNumber" :value="item.batchNumber">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="确认状况：" v-if="comfirmModel.batchNumber" prop="comfirmModel">
        <el-steps :active="comfirmModel.steplength" space="150px">
          <el-step title="产品信息确认"></el-step>
          <el-step title="客户信息确认"></el-step>
          <el-step title="案件信息确认"></el-step>
        </el-steps>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="chooseBatchNumberConfirm">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import { Emit, Prop, Component } from 'vue-property-decorator';
import { Dependencies } from '~/core/decorator';
import { CaseInfoService } from '~/services/domain-service/case-info.service';
import { Form } from "element-ui";


@Component({})
export default class CaseBatchConfirm extends Vue {
  @Dependencies(CaseInfoService) private caseInfoService: CaseInfoService;

  @Prop()
  private batchList:any[]

  private comfirmModel: any = {
    batchNumber: '',
    steplength: 0
  };

  private rules = {
    batchNumber: { required: true, message: "请选择批次号！" }
  }

  @Emit("success")
  private emitSuccess() {
    this.$message.success('案件信息确认后台正在进行,请前往待分配案件查看');
    this.emitClose()
  }

  @Emit("close")
  private emitClose() {
    const form = this.$refs.form as Form;
    form.resetFields()
  }

  /**
   * 选择批次号
   */
  private chooseBatchNumberConfirm() {
    const form = this.$refs.form as Form;
    form.validate(v => {
      if (!v) return
      this.caseConfirm();
    })
  }

  private changeShopping(val) {
    const currentNumber: any = this.batchList.filter((x) => x.batchNumber === val)[0]
    if (currentNumber.productFlag === "YES" && currentNumber.personalFlag === "YES" && currentNumber.caseFlag === "YES") {
      this.comfirmModel.steplength = 3
    } else if (currentNumber.personalFlag === "YES" && currentNumber.productFlag === "YES") {
      this.comfirmModel.steplength = 2
    } else if (currentNumber.productFlag === "YES") {
      this.comfirmModel.steplength = 1
    } else {
      this.comfirmModel.steplength = 0
    }
  }
  /**
   * 案件确认选择批次号确认
   */
  private caseConfirm() {
    const { steplength: flag, batchNumber } = this.comfirmModel
    if (flag === 0) {
      this.caseInfoService.confirmProductInfo({ batchNumber }).subscribe(
        (data) => {
          this.$message.success('产品信息确认成功')
          this.comfirmModel.steplength = 1
        }
      )
    } else if (flag === 1) {
      this.caseInfoService.confirmPersonalInfo({ batchNumber }).subscribe(
        (data) => {
          this.$message.success('客户信息确认成功')
          this.comfirmModel.steplength = 2
        }
      )
    } else if (flag === 2) {
      this.caseInfoService.confirmCaseInfo({ batchNumber }).subscribe(this.emitSuccess)
    }
  }
}
</script>

<style lang="less">
.page.case-batch-confirm {
  .el-step__title.is-finish {
    font-size: 12px;
  }
  .el-step__title.is-process {
    font-size: 12px;
  }
  .el-step__title.is-wait {
    font-size: 12px;
  }
  .el-input.el-input--suffix {
    margin-left: 30px;
  }
}
</style>
